Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I know dropdown menu's are created by wrapping unordered lists and list items.
How does positioning work for drop down menus?
<div class="nav block">
<ul>
<li style="border-left:1px solid black;">Home</li>
<li>About Us
<ul>
<li> Porfolio</li>
</ul>
</li>
<li>Reviews
<ul>
<li>Spellen</li>
</ul>
</li>
<li>Releases</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
Like this
DEMO
CSS
li {
float:left;
position:relative;
margin:0 10px;
}
li li {
float:none;
}
li li a {
white-space:nowrap;
}
li ul {
position:absolute;
top:1.1em;
left:0;
display:none;
border:1px solid red;
}
li:hover ul {
display:block;
}
First huge problem, which can be the main one : your sublist must be wrapped into a <li> tag :
<div class="nav block">
<ul>
<li style="border-left:1px solid black;" >Home</li>
<li>
About Us
<ul>
<li> Porfolio</li>
</ul>
</li>
<li>
Reviews
<ul>
<li>Spellen</li>
</ul>
</li>
<li>Releases</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
The UL (submenu) should be inside the LI (of the menu)
<div class="nav block">
<ul>
<li style="border-left:1px solid black;" >Home</li>
<li>About Us</li>
<ul>
<li> Porfolio</li>
</ul>
<li>
Reviews
<ul style="display:none;"> <!-- Sub menu -->
<li>Spellen</li>
</ul>
</li>
<li>Releases</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
Related
How to use not selector to ignore specific ul li element from css?
<ul class="list">
<li></li>
<li>
<ul>
<li></li>
</ul>
</li>
<li>
<ul class="innerli">
<li></li>
</ul>
</li>
</ul>
I have tried with below code but not working
.list li:not(.innerli li){padding-left:10px;width: 500px;}
.list ul:not(.inner) li is the selector you are looking for I believe.
in .list look for all uls which are not having class .inner and from those take all list.
You are supposed to check by ul:not(selector) as below snippet.
.list ul:not(.innerli) li {
color: red;
}
<ul class="list">
<li>Outer</li>
<li>
<ul>
<li>Inner</li>
</ul>
</li>
<li>
<ul class="innerli">
<li>Inner</li>
</ul>
</li>
</ul>
Update: If you wish to select both <li>Outer</li> as well then you have to go for multi-lines as below.
/*.list ul:not(.innerli) li {
color: red;
}*/
ul:not(.innerli) li {
color: red;
}
ul.innerli li {
color: black;
}
<ul class="list">
<li>Outer</li>
<li>
<ul>
<li>Inner</li>
</ul>
</li>
<li>
<ul class="innerli">
<li>Inner</li>
</ul>
</li>
</ul>
I have a CSS like that
.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:pink;
}
and I want to change some things inside if this block is within a special ID (only then, else the above stuff should be used as default)
I therefore tried that
#target-submenu_2block >.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:green;
}
But this doesn't work out, neither does this here:
#target-submenu_2block ul li.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:green;
}
I'd be grateful for your answers for this specific situation but also for a general hint how to solve situations like that.
Try changing
#target-submenu_2block ul li.rf_re1-submenu ul li.rf_re1-submenu-finder
to
#target-submenu_2block .rf_re1-submenu ul li.rf_re1-submenu-finder
Snippet:
.rf_re1-submenu ul li.rf_re1-submenu-finder{
background:pink;
}
#target-submenu_2block .rf_re1-submenu ul li.rf_re1-submenu-finder{
background:green;
}
<ul>
<li>hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul></li>
<li>hello</li>
<li class="rf_re1-submenu">hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul>
</li>
</ul>
<ul id="target-submenu_2block">
<li>hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul></li>
<li>hello</li>
<li class="rf_re1-submenu">hello
<ul>
<li class="rf_re1-submenu-finder">Goodbye</li>
<li>Goodbye</li>
<li class="rf_re1-submenu-finder">Goodbye</li>
</ul>
</li>
</ul>
I'm trying to create a horizontal list, something like this
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li>
<a>Foo Bar</a>
</li>
</ul>
</nav>
The problem is that with only 1 li element it works (like this ) but with 2 the first li item is not positioned correctly (like this )
Can someone explain to me whats happening?
UPDATE: remove type with class 'active' on anchor!
No need to use absolute positioning. Just do as following:
li.active a {
color: #abc522;
padding: 20px 40px 13px;
width: 146px;
background-color: white;
}
fiddle
Remove the class active from the first list item tag.
<nav class="tabs">
<ul>
<li> <-- Here
<a class="active">Bar Foo</a>
</li>
<li>
<a class="active">Foo Bar</a>
</li>
</ul>
</nav>
OR
<nav class="tabs">
<ul>
<li class="active">
<a>Bar Foo</a>
</li>
<li class="active">
<a>Foo Bar</a>
</li>
</ul>
</nav>
So i have this menu, this is the structure:
<div id="menu-home">
<ul>
<li> a.active </li>
<ul class="sub-menu">
<li> a </li>
</ul>
</ul>
</div>
What i need to access is that <ul class="sub-menu"> when the a is active
Can someone point me to that?
I've used:
#menu-s a.active ul.sub-menuul {
display:block;
}
Thanks
You have a messed up post, but if I understand what do you want to ask, the example below will help you.
This should be your HTML:
<div id="menu-home">
<ul>
<li>
<a href="#"> a.active
<ul class="sub-menu">
<li> sample </li>
</ul>
</a>
</li>
</ul>
</div>
This should be your CSS:
#menu-home ul li a:active ul.sub-menu li {
color: green;
border: 1px solid green;
}
I added few changes to CSS, for you, to help you understand what's happening.
This is the jsfiddle link with the demonstration:
http://jsfiddle.net/aWe3n/24/
This is not how u give class it should be Link
Hello newbie question, I'll just wanted to hover the li.about on the ul.second.. Can someone help me on this one..
<ul id="nav" class="clear">
<li id="home"></li>
<li id="about"></li>
<ul class="second">
<li><a href="www.yahoo.com">1st Link</li>
<li><a href="www.google.com">2nd Link</li>
<li><a href="www.google.com">2nd Link</li>
</ul>
<li id="gallery"></li>
<li id="before-after"></li>
<li id="loft"></li>
<li id="case"></li>
<li id="testimonials"></li>
<li id="faqs"></li>
<li id="contact"></li>
</ul>
css codes
#navigation ul#nav li#about:hover ul.second
{
background:#CCC;
padding:1px;
margin:1px;
height:200px;
color:black;
z-index:1000;
width:200px;
}
If its a drop down menu you're trying to do, then make use of the display: none; and display: block css properties.