<style>
ul.unorder-list.UL {
list-style-type: none;
}
li.LI {
display: inline-block;
padding: 9px 28px 9px 26px;
border-right-width: 1px;
border-right-style: solid;
border-left-width: 1px;
border-left-style: solid;
background-color: #15a60d;
}
</style>
<ul class="unorder-list UL" id="menu">
<li class="LI"><a title="" href="#">menu 1</a></li>
<li class="LI"><a title="" href="#">menu 2</a></li>
</ul>
As you see no style for a href , there is where you facing the issue.
=============== In Real HTML Environment We Would Have Something Like This :
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></li>
<li><a href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></li>
</ul>
</body>
</html>
=========
But there is an option to have Text Link / Button element then style it as you want then you will have a whole box clickable link.
Guys at coffeecup are awesometacular.
apprecaite the input!
