I have given a right-border (1px solid #000) to menu1 here and a left-border to menu2.
The problem is that that way the dropdown menu takes on the attributes of the main menu and has only a right border.
How can I
1) have no border at all on the dropdown menu?
2) have the dropdown menu with borders? (top, left, right and bottom)
Here is the menu: http://jsbin.com/tifuhute/30/
You can use jQuery to change the border functionality. I would suggest you to use the addclass function and removeclass function in jQuery.
Learn how to use them below:
http://www.w3schools.com/JQuery/html_addclass.asp
http://www.w3schools.com/jquery/html_removeclass.asp
1: Since it appears the links are the ones with the border, you can add this css rule to the menu1 so that the links in the dropdown menus do not have the border:
.menu1 ul a{
border: none;
}
2: I'm not sure what you want. If you want the whole dropdown menu with borders, you can add this css rule, for example:
.menu1 ul{
border: 1px black solid;
}
I tried these css rules and they appear to be working fine
Related
I am trying to implement a sub navigation menu under "Jewellery". The problem is I want a space between the two menus when they open. To achieve this I added "margin-top:5px;" to the sub navigation. It does create the space however as you can see as soon as I bring the mouse down to the sub navigation it becomes deselected.
What is the correct way to achieve this?
nav ul ul {
margin-top:5px;
background-color: #101010;
color: #FFF;
}
Link to jsfiddle
http://jsfiddle.net/2mpcQ/4/
You should use padding-top:5px and the black submenu inside this padded DOM Element
border-top: 5px solid #fff;
This will give the appearance of space between the Menu and sub menu.
and will still give it functionality.
You can use div tag sub menu to get the desired vertical space. I have modified your jsfiddle for reference.
.rowheight {background: #fff; font-size: 5px;}
<ul>
<li>
<div class="rowheight"> </div>
<ul><li>Item</li></ul>
</li>
</ul>
jsfiddle link -
http://jsfiddle.net/2mpcQ/25/
or can use border-top: 5px solid #fff; for nested ul but it is not controllable. It will affect all nested UL tags.
hope this helps!
If you want just to solve this issue, try adding border-top to .nav ul ul (border-top:5px solid #fff;). Though, your question was "what's the correct way to achieve this?". I think the right way is styling the "a" element, as Diodeus said.
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
I created a navigation that has a horizontal submenu. For some reason when I rollover over submenu the top nav is moving.
http://jsfiddle.net/pgorski/2kBru/ - Sub menu is located on the product link.
I search the site but could not find the answer.
Add border: 1px solid transparent; to your links
DEMO
It's because of your border set to your a tag. Remember that each border will produce 1px more over the original tag you used. So the tab when you hover your mouse on will be bigger than the original tab. Try removing the border and test it.
I'm making a pure css dropdown menu (code here: http://jsfiddle.net/SeXyv/7/ ) and I would like to have a border only around the outside and not in between items.
The issue I am having is the border between the "topic" and "subtopic 1" in the js.fiddle example. I can get a border all the way across between the two, but I only want it on the top right portion as an outline, not directly between the two links (where the gold and gray meets)
Can anyone help me out here?
Thanks
EDIT: here is a pic of what I would like the border, the part circled in red, with the border stopping once it reaches the tab above it:
http://tinypic.com/view.php?pic=300ehxt&s=6
Basically you put a bottom border on the last element in the dropdown menu and a top border on the first element, then let the element that triggers the dropdown menu have a higher z-index than the menu, then push the menu up the width of the menu
#menu li:hover a {/*increace the z-index over that of the menu*/
...
position:relative;
z-index:5;
}
#menu li:hover li:first-child a{/*first menuitem gets a top border */
border-top:2px black solid;
}
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */
border-bottom:2px black solid;
}
#menu li:hover ul{/* move up menu to cover up part of top border*/
position:relative;
top:-2px;
}
http://jsfiddle.net/SeXyv/14/
add <li style="z-index: 5"><a href="#" class="bordertest" >Topic</a> to your HTML.
And add the required class.
Working fiddle here
Adjust the corners etc.
I am working on a navigation which can be seen here: http://jsfiddle.net/ybvF4/
I'm sure it is against policy to ask two questions in one but my fear is that if I do the solutions may not work together.
The two things I'd like to achieve are:
when the drop down menu is hovered I'd like the title line items ("sui generis" and "reclaimed wood") to have a green background, as they do now, but that fills up to the height of the solid outline that surrounds the navigation.
When hovered I'd like the text in the title list item elements to be white, without losing the effect of the current gray color hover state of the sub line items in the list.
I hope I have made this clear it's pretty tricky to describe in text, please see the jsfiddle link
thanks for any help
when the drop down menu is hovered I'd like the title line items ("sui
generis" and "reclaimed wood") to have a green background, as they do
now, but that fills up to the height of the solid outline that
surrounds the navigation.
Remove this:
nav .navigation {
padding-bottom: 5px;
padding-top: 5px;
}
Then, on .navigation li a, add display: block to allow the padding: 5px; to work as expected.
http://jsfiddle.net/thirtydot/ybvF4/1/
When hovered I'd like the text in the title list item elements to be
white, without losing the effect of the current gray color hover state
of the sub line items in the list.
Add this:
.navigation > li:hover > a {
color: #fff;
}
http://jsfiddle.net/thirtydot/ybvF4/3/
Of course, then the menu items that don't have a submenu have a white background and white text on hover. I assume that's intentional due to the last rule in your CSS.