When hovering over Choose Location the div adv_cities should be displayed and i can navigate the adv_cities menu. What i've tried isn't working.
<div class="header_top_location"> <ul id="city_nav" class="city_nav menu">
<li class="mega">Choose Location
<div class="adv_cities" id="adv_cities" style="display:none">
<ul><li>London</li>
<li>Bristol</li>
<li>Manchester</li>
<li>Kent</li>
</ul>
</div>
</li>
</ul>
</div>
The CSS
.header_top_location .mega > a:hover + .adv_cities, .header_top_location .adv_cities:hover .adv_cities{
display:block !important;
}
.header_top_location .adv_cities {
background-color:#fff
}
.header_top_location .adv_cities ul{
overflow:hidden;
}
.header_top_location .adv_cities li{
float:left;padding:10px;
}
How do i solve this?
The city_nav code is from a plugin and i use on multiple pages, so i don't want to change the code since i use in multiple places.
If all you want on your drop down menu is to hover over one list iten to display the submenu, then you dont necessarily need the inner div and stuff... here is a code snippet for you to work with...
.mega:hover > .adv_cities {
display: block !important;
}
.header_top_location .adv_cities {
background-color: #fff
}
.header_top_location .adv_cities ul {
overflow: hidden;
}
.header_top_location .adv_cities li {
float: left;
padding: 10px;
}
<div class="header_top_location">
<ul id="city_nav" class="city_nav menu">
<li class="mega">Choose Location
<div class="adv_cities" id="adv_cities" style="display:none">
<ul>
<li>London</li>
<li>Bristol</li>
<li>Manchester</li>
<li>Kent</li>
</ul>
</div>
</li>
</ul>
</div>
The only changes I made in css are in the 1st 3 lines... and I removed the extra div that IMO was not needed..
hope this helps
Related
Question: How do I get this to work for tabbing, using CSS only? (Tabbing already works).
#menu:before {
content:"Menu \25bc";
font-weight:bold;
width:100%;
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu li {
position:absolute;
left:-9999px;
}
#menu:hover li {
position:relative;
left:0;
}
<html>
<title>Test</title>
<body>
<header>
Link to homepage
</header>
<nav>
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<main>
<p>Other text with maybe a link here.</p>
</main>
</body>
</html>
EDIT: Original question follows.
I have a menu:
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
However, I want to hide it at a narrow page width, so I apply the following CSS:
#media (max-width: 768px) {
#menu:before {
content:"Menu \25bc";
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu a {
position:absolute;
left:-9999px;
}
#menu:hover a {
position:relative;
left:0px;
}
}
This hides the menu, adds the word "Menu" in it's place, with a down or up arrow, depending on the hover state, which also shows the menu when you hover over it.
The problem is that, while :hover works just fine, I cannot get both to show by tabbing to one of the tags, using the :focus pseudo class. (Alas, :root will not work like other pseudo classes, so something like #menu a:focus:root #menu a { position:relative; left:0; } won't work, as far as I can see).
Does anyone have any ideas as to how I could approach this, using only CSS? Or have I dug myself into a hole?
Based on OP comment below:
I'm happy to change the HTML, but how would :target work here?
here is a snippet with :target
nav {
height: 0;
overflow: hidden;
position: relative;
}
nav:target {
height: auto;
}
nav + div a:before {
content: "Menu \25bc";
font-weight: bold;
width: 100%;
}
nav:target + div a:before {
content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
display: none;
}
nav:target + div .close,
nav + div .open {
display: block;
position: absolute;
top: 0
}
<nav id="menu">
<ul>
<li>Menu item 1
</li>
<li>Menu item 2
</li>
</ul>
</nav>
<div>
<a class="open" href="#menu"></a>
<a class="close" href="#"></a>
</div>
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
I want to make a drop menu like the one in http://www.homeshop18.com/ with css only without jquery in particular the All category menu.I have tried css drop down menu but the problem is i am unable to fix the second level menu at the top. any suggestion will be appreciated.
Can't understand what you problem is from the way you posted the question but here is a quick menu I put together that only uses CSS that functions like the menu on the site you posted.
HTML:
<ul class="main">
<li>all
<ul class="sub">
<li>books
<ul class="sub2">
<li>fiction</li>
<li>biography</li>
</ul>
</li>
<li>mobile
<ul class="sub2">
<li>android</li>
<li>cmda</li>
<li>battery</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
border:1px solid;
padding:1px;
}
.main {
list-style:none;
position:relative;
}
.sub, .sub2 {
list-style:none;
position:absolute;
display:none;
width:75px;
}
.sub2 {
float:left;
left:75px;
top:0px;
}
.main li:hover .sub,
.sub li:hover .sub2{
display:block;
}
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.
I'm trying to position two elements within an li list next to eachother on the right side to get the result:
Some text.................A...B Unfortunatelly the ordering drives me crazy.
Here's the html code:
<ul class="list">
<li>some text
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
With the following CSS code I was able to get the small-elements on the right side next to each other, but the result is that i see on the right side B next to A!
.list li{
background-color:#282828;
color:#ffffff;
font-size:20px;
text-transform:uppercase;
padding-left:5px;
}
.list small.a {
display:inline;
float:right;
}
.list small.b {
display:inline;
float:right;
}
So, I aim to have:
some tex.....................A...B
but for instance it looks like:
some text....................B...A
See example here --> http://jsfiddle.net/LKVdE/
Thanks upfront for any tip!
Here is the solution: http://jsfiddle.net/surendraVsingh/LKVdE/1/
CSS
.list small.a {
background-color: #000000;
display: inline;
}
.list small.b {
background-color: #ff0000;
display: inline;
}
.list li span{
display: inline-block;
float: right;
}
HTML
<ul class="list">
<li>Brennwert kJ / kcal
<span>
<small class="a">1109kJ / 261kcal</small>
<small class="b">455kJ / 107kcal</small>
</span>
</li>
</ul>
A and B should be put in a right floating container:
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
.floatright {
float:right;
}
And
<li>some text
<div class="floatright">
<small class="a">A</small>
<small class="b">B</small>
</div>
</li>
Why does this happen, because first style is applied to a which moves it to to the right, whatever next appears in the markup must now follow a from the right that's why you see BA instead of AB
Markup changes: Include the text inside a span and add float:left to it
<ul class="list">
<li><span class="text">some text</span>
<small class="a">A</small>
<small class="b">B</small>
</li>
</ul>
Css changes, remove float:right from a and b and add float:left to text
.text{float:left;}
.list small.a {
display:inline;
}
.list small.b {
display:inline;
}
Working fiddle: http://jsfiddle.net/LKVdE/8/