I'm a relative newbie and I'm having trouble following the css for my nav. I need to do 2 things:
1) run my sub menu inline
2) hide my sub-sub nav, and show it inline as well.
Here is the test site: http://gbetza.mydomain.com/webservice2/test/Basso56/test/home.html
Here is the CSS: http://gbetza.mydomain.com/webservice2/test/Basso56/test/css/style%20-%20Copy.css
I'm having trouble understanding which class I need to adjust as well as how.
Thank you
Copy + Paste from a similar answer of mine.
I have created a really simple implementation of this. It is barebones so that you can get a real easy look at the basic concept.
In the fiddle here: http://jsfiddle.net/WS3QQ/2/
HTML - Note how the sub-menus are nested
<div id="nav">
<ul>
<li>Top Menu
<ul>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
<li>Sub-Menu</li>
</ul>
</li>
<li>Top Menu</li>
<li>Top Menu</li>
<li>Top Menu</li>
</ul>
</div>
CSS - note how you can easily target the sub-menus (#nav li li). By default the sub-menu li is hidden (display:none). When the li is hovered over, the sub menu li is shown (display:block).
#nav ul { list-style-type: none; margin: 0; padding: 0; }
#nav li { float: left; }
#nav li li { clear: left; display: none; }
#nav li:hover li { display: block; }
#nav li:hover a { background: #111; }
#nav li a { background: #333; padding: 10px; display: block; color: #FFF; font-weight: bold; text-decoration: none; }
#nav li a:hover { background: #3914AF; }
Related
I would like to change my current menu to allow for one dropdown: Products. My test page can be found here This is my HTML:
<nav>
<ul class="menu">
<li class="current">Home</li>
<li>About Us</li>
<li class="subNav"><a class="selected">Products</a>
<ul>
<li>Designer Bags
</li>
<li>Cowhides
</li>
<li>Hand-carved Geese
</li>
<li>Antler Chandeliers
</li>
</ul>
<li>Gallery</li>
<li>Shows</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</nav>
My original CSS:
.nav-buttons{text-align:center;padding-bottom:17px;}
#nav{overflow:hidden;display:inline-block}
#nav li{float:left;overflow:hidden;margin:0 10px}
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
width:19px;height:19px;
line-height:0;font-size:0;
}
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}
nav{float:right;padding:12px 0 0 0}
.menu {
font-size:0;
line-height:0;
padding:0;
z-index:99;
position:relative;
margin-right:21px;
}
.menu > li {
position:relative;
float:left;
margin-left:11px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:url(../images/point.png)
}
.menu li a{
color:#b3adad;
font-size:18px;
line-height:20px;
display:block;
position:relative;
text-decoration:none !important;
padding:7px 12px 9px;
font-family: 'Noto Sans', sans-serif;
}
.menu li.current,
.menu li:hover {
background:#9c6f51;
}
.menu li.current a,
.menu li:hover a{
color:#fff
}
And this bit of CSS I just added today:
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: #fff;
}
nav ul li.subNav:hover ul {
display: block;
}
It seems to want to work with the exception that I see no sub-menu unless I hover over it. I've come here for help because I'm afraid to mess with the original CSS and thus ruin my navigation throughout the rest of the site. Is there something I can add that will cause the menu to appear within just the "subNav" class, without affecting the rest of the menu or site navigation? (The original CSS came with this template and I do note that font-size:0 is used a few times. Since the menu worked well before I felt I needed to add a dropdown, I have been reluctant to change that, since I would only be experimenting without understanding.)
I've sorted it. I had to change the background color in the "subNav" class, in order for the site menu's overall font color to show up. It's there; I just couldn't see it.
I have a nav that holds a ul with several ils. The problem is that im unable to get rid of the ul's first and last child's divider.
here's a demo: http://jsfiddle.net/Rvs3C/1/
i've added this code to my CSS file but seems like it makes no difference:
nav ul a li:first-child{
content: none;
}
nav ul a li:last-child{
content: none;
}
You markup is wrong. The corret way is <a> tag being the children of tag <li>.
The way you made the correct selector would:
nav ul a:first-child li{
content: none;
}
nav ul a:last-child li{
content: none;
}
But remembering, this is not the right way to do.
The correct is change you html to:
<ul class="showing">
<li>home</li>
...
As mentioned elsewhere your HTML structure is off, li must me a direct child of ul, no other element as a child is valid. With this said, you also need to change your selectors per the below.
Updated Fiddle
HTML
<nav>
<ul class="showing">
<li>home
</li>
<li>about me
</li>
<li>content
</li>
<li>browse
</li>
<li>rate
</li>
<li class="nav_arr"><img src="http://www.irvinewelsh.net/images/arrow-left.png" />
</li>
</ul>
</nav>
CSS
nav {
margin-right: 150px;
}
nav ul {
background-color: #494A4C;
overflow: hidden;
text-align: right;
}
nav li img {
margin-left: 20px;
vertical-align: top;
}
nav ul li a {
color: white;
text-decoration: none;
font-family:arial;
font-size: 14px;
padding: 0px;
font-weight: bold;
}
nav ul li:first-child:before {
content: none;
}
nav ul li:last-child:before {
content: none;
}
nav li:before {
content:"|";
padding: 5px;
font-weight: bold;
color:lightblue;
font-size: 20px;
}
nav ul li {
display: inline-block;
}
I'm new to CSS and I'm trying to make a menu where the sub-list is only visible (and takes up space) on hover-over.
I've found the visibility:collapse; property, but that only masks the sub-list and leaves a big gaping gap in my vertical menu.
Here's what I've got so far, but I'm not sure how to implement the expandable sub-menu on hover over:
CSS:
nav a {
text-decoration: none;
color: white;
font-family: 'Roboto', sans-serif;
}
nav ul {
list-style-type: none;
}
nav ul li ul {
visibility: collapse;
}
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gear
<ul>
<li>P1</li>
<li><a href="p2.html">P2>/a></li>
<li><a href="p3.html">P3/a></li>
<li>P4</li>
<li>P5</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
Any help you can offer is much appreciated
You can use Pseduo-selectors to target the sub-list when you hover over the parent list.
Here's the Fiddle
All you need is this:
nav ul {
position:relative;
list-style-type: none;
background-color:#eaeaea;
}
nav ul li ul {
position:absolute;
display:none;
left:60px;
background-color:#CCC;
}
nav ul li:hover ul {
display:block;
}
This targets the sublist when the parent is hovered over, and overrides the display:none; command
HTML CODE:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gear
<ul>
<li>P1</li>
<li>P2</li>
<li>P3</li>
<li>P4</li>
<li>P5</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
CSS CODE:
nav a {
text-decoration: none;
color: white;
font-family: 'Roboto', sans-serif;
}
nav ul {
list-style-type: none;
}
nav a{
color:#000000;
}
nav ul li >ul {
display: none;
}
nav ul li:hover >ul {
display:block;
}
JSFIDDLE DEMO
Instead of using visibility: collapse; use display:none property because once you use visibility property there a space exist always.
you should try like this.
nav ul li >ul {
display:none;
}
nav ul li:hover >ul {
display:block;
}
A working Demo http://jsbin.com/xivogawu/1/edit
The visibility property only hides an element without changing the layout (i.e. leaving gaps like you've noticed). Also, the collapse value only effects table rows and columns.
The best way to achieve your goal is to use the display property; try this instead:
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
}
Hello I'm new to html & css and I have a problem. I made a navbar and wanted to show the user on wich page he was by changing the background-color in the navbar. But for some reason this doens't work very well. Please help me.
This is the css code I use for the navbar:
#nav{
width: 60%;
display: inline-block;
text-align: right;
float: right;
}
/* unorded list */
#nav ul{}
#nav ul li{
display: inline-block;
height: 62px;
}
/* text in blokken */
#nav ul li a{
padding: 20px;
background: orange;
color: white;
}
#nav ul li a:hover{
background-color: #ff1e42;
box-shadow: 0px 1px 1px #666;
text-decoration: underline;
}
#nav ul li #inuse {
background-color: #ff1e42;
}
my html code looks like this:
<div id="nav">
<ul>
<li><a class="inuse" href="../html/index.html" >Home</a></li>
<li><a href="../html/kleding.html" >Kleding</a></li>
<li><a href="../html/bestel.html" >Bestellen</a></li>
<li>Contact</li>
<li><a href="../html/vragen.html" >Vragen</a></li>
</ul>
</div>
Thanks in advance.
try:
#nav ul li a.inuse{/* in use css */}
instead of:
#nav ul li #inuse{}
hope that helps
I've made a vertical menu using css. It's a menu with sub menus similar to this one:
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/
here you can see an example:
It work fine but when I click in one of the sub menus to see the information, the others sub menus disappear, that is the menu stay underneath the text. So if I want to change page by clicking in another sub menu I'm not able, I have to return to home.
Here is my css code:
#menu ul {
list-style: none;
margin: 0;
padding: 3px;
width: 100%;
font-size: 14px;
}
#menu h2 {
color: white;
background: #9370D8;
padding: 4px;
text-align:center;
font-size:15px;
width: 100%;
display: block;
}
#menu a {
color: black;
background: white;
text-decoration: none;
display: block;
font-weight: bold;
width: 100%;
padding:4px;
}
#menu a:hover {
color: black;
background: #eee;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
and html code:
<div id="menu">
<ul>
<li><h2>Browse</h2>
<ul>
<li>Districts</li>
<li><a href="/browse/time/" >Time</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2>Analyze</h2>
<ul>
<li>Co-occurrence
<ul>
<li><a href="/analyse/co-occurrence/percentage" >Percentage</a></li>
<li><a href="/analyse/co-occurrence/regions" >Regions</a></li>
</ul>
</li>
<li>Geographical
<ul>
<li>Districts</li>
<li>Citizenship</li>
</ul>
</li>
</ul>
</div>
For example I would use the link above. If I click on sub item 2.1 from folder 2, I will see some page with information.
Now I want to see the sub item 1.1 from folder 1, but my problem is when I click in one of the sub menus I'm not able to see the sub item 1.1, so if I want to click in sub item 1.1 I have to return to the main page
the problem is the following:
Any help would be appreciate :)
Thanks!
The problem was the z-index.
I read the tutorials and the front page had an z-index: -1;
and the menu had a z-index: 1;
So the following doesn't work, you have to set something like this:
body
{
z-index: 1;
}
sub-menu
{
z-index: 999;
}