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.
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 add a new class to ul and try to style it with margin: 0 auto and text-align: center but doesn't work..
<section class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Venue</li>
<li>Schedule</li>
<li class="dropdown">
Artists <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>All Artists</li>
<li class="divider"></li>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</li>
<li>Register</li>
</ul>
</section>
Here's the fiddle with center bootstrap nav items...
jsfiddle
You just need to add following css.
.navbar {
text-align:center;
}
Like this
demo
css
.nav{
background-color:red;
width:300px;
margin:0 auto;
text-align:center;
}
.nav ul {
list-style-type:none;
}
.nav ul li{
}
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>
I have 2 or more <UL> sets inside, and wants to only make first UL <a> set to bold.
in fact, this is a menu with multiple sub menus, and I only want to make parent links bold.
I know it can be done by adding some more ID's or classes, but this is not an option, and just want to try css method only.
<ul class="menu">
<li class="collapsed first">
<a title="Mechanical products" href="1">Mechanical Products</a>
</li>
<li class="collapsed">
<a title="Chemicals" href="2">Chemicals</a>
</li>
<li class="expanded active-trail">
<a title="Instrumentation" href="3">Instrumentation</a>
<ul class="menu">
<li class="leaf first">
<a title="Control valves FISHER" href="4">Control Valves</a>
</li>
<li class="expanded active-trail">
<a class="active" title="Corrosion Monitoring System" href="5">Corrosion Monitoring</a>
<ul class="menu">
<li class="leaf first">
<a title="Access Fitting Assemblies" href="6">Fitting Assemblies</a>
</li>
<li class="leaf last">
<a title="Coupon Holders, Coupons & Probes" href="7">Holders,Coupons</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="collapsed">
<a title="Mechanical products2" href="8">Mechanical Products2</a>
</li>
</ul>
as of this example, only "Mechanical Products", "Chemicals", "Instrumentation" and "Mechanical Products2" should get bold.
Use the first child selector: >
.menu > li {
font-weight: bold;
}
Not that if you need to support IE6, you'll have to do it manually, as IE6 doesn't support the > selector:
.menu li a {
font-weight: bold;
}
.menu li ul li a {
font-weight: normal;
}
It will probably do it...
ul.menu li a
{
font-weight:bold;
}
ul.menu li ul li a
{
font-weight:normal;
}
You'll have to use the child selector and make the top-level <ul> unique by giving it some class:
ul.top-level > li > a {
font-weight: bold;
}
Demo: http://jsfiddle.net/kJJw9/
ul.menu li.collapsed a{font-weight:bold;}