html - Arrow under navigation -


hi i've looked ways place arrow under navigation can't work on navigation bar. appreciated.

<nav>        <div class="hello"></div>             <ul>               <li class="icon-home"><a href="premiership.html"><span>home</span></a></li>              <li class="arrow"> <a  class="star" href="#">england</a>                 <ul>                     <li><a href="premiership.html">premiership</a>                     </li>                     <li><a href= "unavailble.html">championship</a>                     </li>                     <li><a href="unavailble.html">league 1</a>                     </li>                     <li><a href="unavailble.html">league 2</a>                     </li>                 </ul>             </li>             <li class="arrow"> <a href="#">france</a>                 <ul >                     <li id="r"><a href="unavailble.html">ligue 1</a>                      </li>                 </ul>             </li>             <li class="arrow"> <a href="#">germany </a>                  <ul>                     <li><a href="unavailble.html">bundesliga</a>                     </li>                 </ul>             </li>             <li class="arrow"> <a href="#">italy</a>                  <ul>                     <li><a href="unavailble.html">serie a</a>                     </li>                 </ul>             </li>             <li class="arrow"> <a href="#">spain</a>                 <ul>                     <li><a href="unavailble.html">la liga</a>                     </li>                 </ul>             </li>         </ul>                 <div class="handle"> menu </div>         </nav>

i thought css work hasn't 

li a:after {   content: '';   display: none;   width: 0;   height: 0;   border-top: 6px solid #333;   border-right: 6px solid transparent;   border-left: 6px solid transparent;   position: absolute;   z-index: 1;   top: 100%;   left: 50%;   margin-left: -6px }

my code https://jsfiddle.net/jzqv6kr0/

in case, arrow there it's overflow:hidden on ul means can't see it.

i've adapted code little (see snippet below) requires tweaks might like. i've colored arrow red simplicity.

nav ul {     /* overflow:hidden; remove */  }  nav ul li.arrow:after {   content: '';   width: 0;   height: 0;   border-top: 6px solid red;   border-right: 6px solid transparent;   border-left: 6px solid transparent;   position: absolute;   z-index: 1;   top: 100%;   left: 50%;   margin-left: -6px } 

nav ul {    background-color: #43a286;    color: white;    padding: 0;    text-align: center;    margin: 0;    -webkit-transition: max-height 0.4s;    -ms-transition: max-height 0.4s;    -moz-transition: max-height 0.4s;    -o-transition: max-height 0.4s;    transition: max-height 0.4s;  }  nav ul li {    display: inline-block;    padding: 20px;    width: 12.3%;    text-align: center;    position: relative;  }  nav ul li:hover {    background-color: #399077;  }  nav ul li.arrow:after {    content: '';    width: 0;    height: 0;    border-top: 6px solid red;    border-right: 6px solid transparent;    border-left: 6px solid transparent;    position: absolute;    z-index: 1;    top: 100%;    left: 50%;    margin-left: -6px  }  nav ul ul {    display: none;    position: absolute;    background-color: #399077;    margin-left: -3%;    z-index: 150;  }  nav ul ul li {    display: block;    width: 75%;    text-align: center;  }  nav ul li:hover ul {    margin-top: 2%;    display: block;    border-bottom-left-radius: 5%;    border-bottom-right-radius: 5%;    width: 165px;  }  nav ul li a,  visited {    color: white;    font-family: 'cfjackstory-regular', helvetica, arial, sans-serif;    display: block;    text-decoration: none;  }  nav ul ul li a:hover {    color: white;    font-size: 20px;  }
<nav>    <div class="hello"></div>    <ul>      <li class="icon-home"><a href="premiership.html"><span>home</span></a>      </li>      <li class="arrow"> <a class="star" href="#">england</a>          <ul>          <li><a href="premiership.html">premiership</a>            </li>          <li><a href="unavailble.html">championship</a>            </li>          <li><a href="unavailble.html">league 1</a>            </li>          <li><a href="unavailble.html">league 2</a>            </li>        </ul>      </li>      <li class="arrow"> <a href="#">france</a>          <ul>          <li id="r"><a href="unavailble.html">ligue 1</a>           </li>        </ul>      </li>      <li class="arrow"> <a href="#">germany </a>          <ul>          <li><a href="unavailble.html">bundesliga</a>            </li>        </ul>      </li>      <li class="arrow"> <a href="#">italy</a>          <ul>          <li><a href="unavailble.html">serie a</a>            </li>        </ul>      </li>    </ul>  </nav>


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more