Here's my code:
jsfiddle.net/q49hb
<ul id="navigation">
<li><a class="" href="#">Home</a></li>
<li><a class="" href="#">Blog</a></li>
<li><a class="" href="#">Services</a></li>
<li><a class="" href="#">About</a></li>
</ul>
There's a little caret cursor in between each list item when hovering over. I noticed floating to the left will get rid of it, but then I can't center the navigation, which I am also trying to do. Any help?
So to re-cap, I'm looking to:
Space out the list items, leaving no excess space.
Not show a carrot cursor when hovering in between the items.
Centering the unordered list nav on the page.
None of the answers above are correct or even close. You need users to know what is clickable and what isn't. The caret is in fact misleading and distracting between list items. This is bad UX. You cannot blitz the ul with cursor: pointer; then everything will seem clickable, even bewteen li's.
reset the entire ul's clickable area (even between list items)
ul{
cursor:default;
}
Now define what is clickable.
ul li{
cursor:pointer;
}
You can do one of two things.
You can set the parent element (#navigation) so cursor: pointer; which will stop the caret from showing in between links:
http://jsfiddle.net/q49hb/1/
#navigation {
cursor: pointer;
}
Or you can remove the whitespace between the <li>s, which is what's causing the default caret cursor type to show.
http://jsfiddle.net/q49hb/2/
<li><a class="" href="#">Home</a></li><li><a class="" href="#">Blog</a></li><li><a class="" href="#">Services</a></li><li><a class="" href="#">About</a></li>
EDIT: Option 2 is better, (but the code isn't very neat,) because Option 1 gives users the illusion that the space is clickable when it isn't (thanks #JoshC)
you can set a minus margin-left to force the LI to be together and a set a width for the anchors:
demo
#navigation li {
display: inline;
margin-left: -4px;
}
#navigation a{
width: 60px;
display: inline-block;
}
Related
I'm wondering what some good practices are for styling li elements like buttons. Any examples would be appreciated. I'm guessing a box shadow and a background color would go a long way, but that alone does not seem to be enough.
Edited the question to make it more useful.
Okay I think what your after is to make the whole link clickable rather than just the text. All you need to do is make your anchor a block element, then it will take the full width of the li:
.nav a {
display:block;
}
<ul class="nav">
<li>Home</li>
<li>About us</li>
</ul>
I assume you try to make menu and want bigger buttons than just link text.
You should set links inside list elements as you shown and then make links as buttons.
Very simple css example for horizontal menu would be something like this:
.nav li {
list-style-type: none;
padding 0px;
margin 0px;
float: left;
}
.nav li a {
text-decoration: none;
display: block;
padding: 0px 15px;
line-height: 25px;
}
For horizontal menu you should make width with padding and height with line-height. Unless you want every button to be same sized, then you just could use width.
More in-depth example would be this one http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
I think your issue may be that you have styled the <li> to look like the menu button, but the text is the only part that is clickable, is this correct?
What you need to do, is not style the <li> as the menu button but instead the <a> within it.
Here is a demo: https://jsfiddle.net/arrx7dL7/
As you can see the styles are applied to the links, rather than the li
HTML:
<ul class="menu">
<li><a class="menu-item" href="#">Item 1</a></li>
<li><a class="menu-item" href="#">Item 2</a></li>
<li><a class="menu-item" href="#">Item 3</a></li>
<li><a class="menu-item" href="#">Item 4</a></li>
</ul>
CSS:
.menu {
list-style:none;
}
.menu-item {
color:black;
text-decoration: none;
background: #eee;
border: 1px solid #ccc;
padding:20px 30px;
display:block;
}
I think this is what you mean, if so I hope it is helpful.
I implemented the Lavalamp tab menu in my website: when Mouse goes on absolute Div "#lavalamp" bottom "subs" div not display.How to fixed this, please help me.
Detail code click here
<ul id="nav">
<li><a class="hsubs" href="#">Magento</a>
<div class="subs colbg01">
Submenu 1
</div>
</li>
<li><a class="hsubs" href="#">Wordpress</a>
<div class="subs colbg02">
Submenu 2
</div>
</li>
<li><a class="hsubs" href="#">Mobile App</a>
<div class="subs colbg03">
Submenu 3
</div>
</li>
<div id="lavalamp"></div>
The problem happens when you hover over the triangle, which causes the underlining li to lose its own hover and thus invalidating the active li:nth-child(..) ~ #lavalamp rule.
You can solve this issue with modern browsers by disabling the pointer events on the lavalamp element
#lavalamp{pointer-events:none;}
demo at http://jsfiddle.net/gaby/6Lmgkhxd/4/
Notice: IE added support for pointer-events on v11
The reason this is not working is because the hover state of the li is being broken when hovering over the #lavalamp element (which appears later in the DOM).
If you really want a CSS only fix you can use z-index to place the triangle behind everything else and bring the li forward.
like:
#nav li {
float: left;
display: block;
padding: 16px 20px 18px 20px;
z-index: 1; // <--- added this
}
#lavalamp {
z-index: -1; // add this
... other code
}
example: http://jsfiddle.net/6Lmgkhxd/3/
I changed the li's background-color to transparent to allow this to work.
Also there seems to be a slight gap between the li and the.subs so I increased the bottom padding of the li to overlap better to the 50px top positioned .subs (from 16px to 18px)
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/
http://www.lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html
Right last item's dropdown goes outside the menu
alt text http://shup.com/Shup/374936/110621146-My-Desktop.png
I need only last last item's submenu inside.
like this
alt text http://shup.com/Shup/374939/1106211810-My-Desktop.png
Firstly, you might want to consider positioning your main menu li's relatively. Then the drop down ul's which are positioned absolutely will appear underneath their corresponding li by default. Like this for example:
ul.dropdown li {
position: relative;
}
Then you can simply add a new class to the last <li class="dir"> which gets its own styling to change the position of the last dropdown menu. Something like this for example:
HTML:
<li class="dir last">
CSS:
li.last ul {
left: -50px; /* or however much you need for it to appear where you want it to */
}
You'll need to set the right position for that particular list i.e.
<li class="dir">Contact Us
<ul style="last-menu">
<li>Enquiry Form</li>
<li>Map & Driving Directions</li>
<li>Your Feedback</li>
</ul>
</li>
<style>
.last-menu{
right: 0px;
}
</style>