sorry if this has been asked before, I've looked and have tried several options but I can't seem to get this to work. I want to center my submenu. Each parent item has variable widths, and the submenu items also have variable widths.. This is my code:
.menu-wrap ul li{margin:0;padding:0;display:inline-block}
.menu-wrap ul li>a{font-size:16px;color:rgba(0,0,0,.6);display:block}
.menu-wrap ul li>ul{position:absolute;float:left;left:0;right:auto;top:90px;width:auto;padding:10px 0;background:#fff;opacity:0;border-top:solid 1px rgba(245,130,32,1)}
.menu-wrap ul li.parent:hover>ul{opacity:1}
<ul class="nav menu">
<li class="item-101">Home</li>
<li class="item-129 parent">About
<ul class="nav-child">
<li class="item-148">About Us</li>
<li class="item-116">Testimonials</li>
</ul>
</li>
<li class="item-114 parent">Services
<ul class="nav-child">
<li class="item-122">Services Page Example</li>
<li class="item-123">Services Page Example 2</li>
<li class="item-124">Services Page Example 3</li>
</ul>
</li>
<li class="item-154">Case Studies</li>
<li class="item-115">Gallery</li>
<li class="item-149">FAQ's</li>
<li class="item-117">Contact</li>
</ul>
Currently it's just left aligned.
I came across this guide recently and found it helpful.
http://css-tricks.com/centering-css-complete-guide/
Related
There is one monolithic data block of the UL.
How to use CSS to split a list of UL with multiple LI LVL1 into three columns with the same height?
Each LI has different heights.
The number of LI blocks is always different.
<div class="div_list">
<ul class="list">
<li class="list_li">...</li>
<li class="list_li">...</li>
<li class="list_li">...</li>
<li class="list_li">
<ul>
<li class="list_li_lvl2">...</li>
<li class="list_li_lvl2">...</li>
</ul>
</li>
<li class="list_li">...</li>
<li class="list_li">...</li>
<li class="list_li">...</li>
</ul>
</div>
EDIT:
I'm close to the answer, but LVL2 goes to the next column.
EDIT 2:
Solution found DEMO
I want to remove the bullet point for this code. tried many ways but no luck. any help?
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
.widget ul li{ list-style-type: none;}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
As the div container only list contact information, I'd recommend styling the elements using the wpcw-widget-contact class as it has a great fit with the context.
.wpcw-widget-contact ul {
list-style: none;
}
<div class="widget wpcw-widgets wpcw-widget-contact">
<ul>
<li class="has-label">Name</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
<li class="has-label">Address</li>
<li class="has-label">Country</li>
</ul>
</div>
You also might be interested to look up more details about the CSS property used on this answer.
Can someone help me. I have this html code and i want to design my submenus with css, but i am new in this and i really need a help
<div class="nav-collapse collapse">
<ul id="nav-list" class="nav pull-right">
<li>Home</li>
<li>About</li>
<li>Updates</li>
<li>Screenshots</li>
<li>How to</li>
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
<li>Permissions</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
I want to have dropdown list for my submenus.My menu is horizontal at the moment
To get you started...
.nav li ul { display: none; }
.nav li:hover ul { display: block;}
Your HTML needs a minor edit also... You need to nest the sub-menu <ul> inside the parent <li>. Like below:
<li>How to
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
</ul>
</li>
Here is a jsfiddle demonstrating this working, obviously it is not horizontal as I lack the styles you already made, the functionality still works however when you hover the mouse over "How To":
http://jsfiddle.net/Zuvdf/
Is it possible to target only the "Pulldown Parent Menu" link below in CSS (I can't modify the code below)?
The line of code I wish to target so that I can modify it in CSS is:
<li class="page_item page-item-8">Pulldown Menu Parent
The page-item-8 class is dynamically generated so I can't rely on it.
The full code is:
<div id="access" role="navigation">
<div class="skip-link screen-reader-text">Skip to content</div>
<div class="menu">
<ul>
<li class="current_page_item">Home</li>
<li class="page_item page-item-19">Contact</li>
<li class="page_item page-item-8">Pulldown Menu Parent
<ul class='children'>
<li class="page_item page-item-9">Test Page 2</li>
<li class="page_item page-item-11">Test Page 3</li>
<li class="page_item page-item-13">Test Page 4</li>
<li class="page_item page-item-15">Test Page 5</li>
<li class="page_item page-item-17">Test Page 6</li>
</ul>
</li>
</ul>
</div>
</div><!-- #access -->
How can I access the Pulldown Menu Parent link above in CSS?
At your Appearance > Menus, you can click Screen Options and click CSS Classes to add specific class for a specific menu item.
Click here for full image view
I have a navigator on my site, made of <ul> elements:
<div class="navigator">
<ul>
<li class="nav-item nav-parent nav-expanded">Category One
<ul>
<li class="nav-item nav-parent nav-collapsed">Subcategory One</li>
<li class="nav-item nav-parent nav-collapsed">Subcategory Two</li>
<li class="nav-item nav-parent nav-collapsed">Subcategory Three</li>
<li class="nav-item nav-parent nav-expanded">Subcategory Four
<ul>
<li class="nav-item nav-expanded">Item 4-1</li>
<li class="nav-item nav-selected">Item 4-2</li>
<li class="nav-item nav-expanded">Item 4-3</li>
</ul>
</li>
<li class="nav-item nav-parent nav-collapsed">Subcategory Five</li>
</ul>
</li>
<li class="nav-item nav-collapsed">Category Two</li>
<li class="nav-item nav-collapsed">Category Three</li>
<li class="nav-item nav-collapsed">Category Four</li>
</ul>
</div>
Expanded and collapsed elements differ in a mark "+" or "-" made by following rules of css:
li.nav-expanded:before {
content: "- ";
}
li.nav-collapsed:before {
content: "+ ";
}
It looks fine in Firefox:
But it looks weird in Chromium:
Why is this weird - because it fixes with strange action in Developer tools:
I choose li.nav-item element, change display: list-item to display:inline and back to display:list-item. And it looks fine.
I don't understand, how to fix this? Is this Chromium bug?
<ul> that are inside the <li> should be display: list-item too. So making:
li.nav-item ul, .navigator ul {
display: list-item;
}
fixed the problem in Chromium.