I need to have the same hover effect to be applied on the current state for the main menu item (sub items already have the current state)
<ul id="left-menu"><li><a href="#">
<h3>Improve Your Free Web Page <span style="float:right">▼</span></h3>
</a>
<ul>
<li class="current">Upload Your Picture(s)</li>
<li>Upload Your Video(s)</li>
<li>Upload Your Logo</li>
<li>Upload Your Logotype</li>
<li>Update Your Tagline</li>
<li>Describe Your Business</li>
<li>Add Offer(s)</li>
</ul>
Jsfiddle
Usually with submenu's people create a list in a list. If you add the "current" class to the outer list, you can style it with css properly.
Related
I have 3 menus with subitems in my navbar, those subitems are linked to specific sections id of the main page as such:
<ul id="navbar">
<li id="idli1" class="listli">
navbar-Item1
</li>
<li id="idli2" class="listli">
navbar-Item2
<ul class="sublist">
<li id="idsubli1" class="sublistli">
sub-Item 1</li>
<li id="idsubli2" class="sublistli">
sub-Item 2</li>
<li id="idsubli3" class="sublistli">
sub-Item 3</li>
</ul>
</li>
<li id="idli3" class="listli">
navbar-Item3
</li>
</ul>
On desktop everything works fine.
On mobile the link seems to not be valid, the formula https://www.site.co/page/#id doesn't work.
Clicking on the submenu just close the submenu.
If i remove the section id from the link, the subitem works and goes to the page.
you can check the menu here
am i missing something about mobile and anchors?
i really don't understand what is the problem about those links.
on mobile your navbar collapse from what I have seen so maybe its being assigned an id that you have used in your menu already thus the link won't work - ids should be unique
I'm just learning html to build a team site at work. I'm getting the hang of it pretty easily, but I'm having an issue with subfolders not showing in a dropdown. The html is linked to css for a design, but I know the problem isn't with the css.
I'm not exactly sure what to try as I mentioned I am just learning how to code the html.
<li class="top"><span class="down">Folders</span>
<ul class="hsolinks">
<li><span class="down">HIPAA Security Office</span></li>
<ul class="hsolinks">
<li>Access</li>
<li>Audit</li>
<li>LAN File Access</li>
<li>Training</li>
</ul>
The expected result is that the folders "ACCESS", "AUDIT", "LAN FILE ACCESS", and "TRAINING" would show under the HIPAA Security Office in a css dropdown. However, when I place the code into SharePoint it only shows an arrow, but no folders in the dropdown under HIPAA Security Office.
Also, there is additional code under this which is why I have only closed one ul tag. I hope I'm clear with what I'm trying to do!
The <li> element always needs to be surrounded by a <ul> element. But you can have a <ul> inside an <li> if needed. Something like so will work
<ul>
<li class="top">
<a href="#nogo4" id="hsolinks" class="top_link">
<span class="down">Folders</span>
</a>
<ul class="hsolinks">
<li>
<a href="#" target="_parent" class="hsolinksfly">
<span class="down">HIPAA Security Office</span>
</a>
<ul class="hsolinks">
<li>
Access
</li>
<li>
Audit
</li>
<li>
LAN File Access
</li>
<li>
Training
</li>
</ul>
</li>
</ul>
</li>
</ul>
For more information and examples about the <ul> <li> elements read: ul: The Unordered List element
This is the block of code I am having trouble with on a website. From all the looking I have done the <li> and </li> should work just fine. However when I run it on the site it causes this list to be linked to the next list as if I never closed the list tag. If I remove everything and bring the </li> to right behind the </a> it works fine, but if say I put a space or press enter it acts as if the </li> does not exist.
<li>contact
<ul class = "contact">
<li>email</li>
<li>phone</li>
<li>skype</li>
<li>twitter</li>
<li>facebook</li>
</ul>
</li>
<li> home
</li>
even something as simple as this the </li> gets ignored.
I have an html page with several lists nested within one parent list. I want to create a link at the bottom of each list that when clicked will take the user to the top of the list item.
I understand that it is possible to create a link to the top of the page like this:
Top of Page
An example of what I'm looking for would be
Top of List
The href can point to whatever the id of your list is.
So, if you have
<ul id="MyList">
<li>Example one</li>
<li>Example two</li>
<li>etc...</li>
</ul>
you could link to it with:
Top of list
The initial example you give, linking to "#" jumps to the top of the page, because that's essentially an unused id, which will always go to the top of the page.
You need the # symbol to reference ids:
<ul id="firstlist">
<!-- List goes here -->
</ul>
Go to top
use <a name="name"> tag
JSFIDDLE
<li>list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> list </li>
<li> <a name="name"> here </a></li>
<li> list </li>
<li> list </li>
go to top
I am working on a drop down menu. Trouble that I am facing is that, I have a 3 level of <ul>, and in second level when height of a <li> increases because it was accommodating another <ul> then all other <li> of second level do not wrap around it.
You can visualize the situation in this Fiddle
when you hover your mouse over Technology then you would be able to see that size of Web Design <li> is greater because of another <ul> that it is accommodating, because of that Typography and Front end has dropped below. Is there any way to keep them wrapping around?
Html structure is like this:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li> <span>Technology</span>
<ul>
<li>Hot news</li>
<li>Sad news</li>
<li>Normal news</li>
<li>Web Design
<ul>
<li>Super power
</li>
<li>Aim Gain
</li>
<li>Acheivers
</li>
<li>Lackers</li>
</ul>
</li>
<li>Typography
</li>
<li>Front-End
</li>
</ul>
</li>
<li>Personal Stuff
</li>
</ul>
EDIT: Attaching few screenshots
This image shows present problem, see position of Typography and Front-end
Following image shows what I am trying to achieve, see position of Typography and Front-end
Here you go: JSFiddle
UPD: JSFiddle in acc to screenshot (Need to update CSS rules)
UPD: JSFiddle example based on classes
I've just removed the margin-left:20px; on #nav li ul li > ul
Tested on Safari 6.1 (Mac OS X 10.9) |
UPD: additionally tested on Chrome (30) & FF (23.0.1) under Mac OS X 10.9